<template>
  <div>
    <app-head>Register</app-head>
    <form
      novalidate
      @submit.prevent="onRegister"
      class="needs-validation"
      :class="{'was-validated': wasValidated}"
    >
      <div class="form-group">
        <input
          type="text"
          class="form-control"
          v-model="username.value"
          placeholder="username"
          required
        >
        <div v-if="!username.valid" :class="{'invalid-feedback': !username.valid}">请输入用户名</div>
      </div>
      <div class="form-group">
        <input
          type="password"
          class="form-control"
          v-model="password.value"
          placeholder="password"
          required
        >
        <div v-if="!password.valid" :class="{'invalid-feedback': !password.valid}">请输入密码</div>
      </div>
      <div class="form-group">
        <button class="btn btn-primary btn-block">Register</button>
      </div>
    </form>
  </div>
</template>

<script>
import Head from '@/components/common/Head'
import { mapActions } from 'vuex'

export default {
  name: 'Register',
  data() {
    return {
      username: { value: null, valid: false },
      password: { value: null, valid: false },
      validation: false,
      wasValidated: false
    }
  },
  methods: {
    ...mapActions(['register']),
    onRegister() {
      this.wasValidated = true
      this.checkForm()
      if (this.validation) {
        this.register({
          username: this.username.value,
          password: this.password.value
        })
      }
    },
    checkForm() {
      this.username.valid = !this.username.value ? false : true
      this.password.valid = !this.password.value ? false : true
      this.validation = this.username.valid && this.password.valid
    },
    validEmail: email => {
      var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
      return re.test(email)
    }
  },
  computed: {},
  components: {
    'app-head': Head
  }
}
</script>

<style>
</style>
